<template>
  <div class="login" v-loading="loading" v-if="showLogin">
    <div class="avantar">
      <span class="avanter-item">
        <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
      </span>
    </div>
    <div class="item">
      <Login @on-submit="handleSubmit">
        <UserName name="username"/>
        <Password name="password"/>
        <div class="auto-login">
          <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
          <a>忘记密码</a>
        </div>
        <Submit />
      </Login>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onUnmounted, ref} from "vue";
import {useRouter} from "vue-router";
import {ipcRenderer} from "electron";
import {LOGIN} from "@/common/EventType";
import {profileRequest} from "@/requests"

const loading:boolean = ref(false)
const autoLogin:boolean = ref(false)
const showLogin:boolean = ref(true)
// 路由
const router = useRouter();
const handleSubmit = (valid, {username, password}) => {
  if (username == "123" && password == "123") {

    profileRequest.getBaiduInfo("xxx").then((res) => {
      console.log(res)
    }).catch((error) => {
      console.log(error)
    })


    loading.value = true
    showLogin.value =false
    ipcRenderer.send(LOGIN)
    router.push({name: 'todo-list'})
  }
}

</script>

<style lang="scss">
.login {
  -webkit-app-region: drag;
  button, input {
    -webkit-app-region: no-drag;
  }
  width: 310px;
  height: 380px;
  text-align: center;
  //line-height: 400px;
  padding: 10px 20px;

  .avantar {
    height: 100px;
    line-height: 100px;

    .avanter-item {
      display: inline-block;
      height: 100px;
      line-height: 150px;

      .el-avatar--circle {
        box-shadow: 2px 3px 8px #969494;
      }
    }
  }

  .item {
    .auto-login{
      margin-bottom: 24px;
      text-align: left;
    }
    .auto-login a{
      float: right;
    }
  }
}
</style>
